<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'time-line'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      //   const that = this
      this.chart = this.$echarts.init(this.$el)
      const color = {
        time: '#24CEF4',
        text: '#ffffff',
        line: '#24CEF4'
      }
      const list = [
        {
          policy_content:
            '关于在疫情防控常态化前提下积极服务落实“六保”任务 坚决打赢打好污染防治攻坚战的意见',
          policy_country: '中国',
          policy_time: '2020.06.09',
          policy_title:
            '关于在疫情防控常态化前提下积极服务落实“六保”任务 坚决打赢打好污染防治攻坚战的意见'
        },
        {
          policy_content: '关于开展2020年全国节能宣传周和全国低碳日活动的通知',
          policy_country: '中国',
          policy_time: '2020.06.20',
          policy_title: '关于开展2020年全国节能宣传周和全国低碳日活动的通知'
        },
        {
          policy_content: '关于开展省级国土空间生态修复规划编制工作的通知',
          policy_country: '中国',
          policy_time: '2020.09.24',
          policy_title: '关于开展省级国土空间生态修复规划编制工作的通知'
        },
        {
          policy_content:
            '国务院办公厅关于印发新能源汽车产业发展规划（2021—2035年）的通知',
          policy_country: '中国',
          policy_time: '2020.11.02',
          policy_title:
            '国务院办公厅关于印发新能源汽车产业发展规划（2021—2035年）的通知'
        },
        {
          policy_content:
            '国家林业和草原局办公室关于印发《2019年林业和草原应对气候变化政策与行动》白皮书的通知',
          policy_country: '中国',
          policy_time: '2020.12.02',
          policy_title:
            '国家林业和草原局办公室关于印发《2019年林业和草原应对气候变化政策与行动》白皮书的通知'
        },
        {
          policy_content:
            '国务院办公厅关于推进人工影响天气工作高质量发展的意见',
          policy_country: '中国',
          policy_time: '2020.12.02',
          policy_title: '国务院办公厅关于推进人工影响天气工作高质量发展的意见'
        },
        {
          policy_content:
            '国务院关于加快建立健全绿色低碳循环发展经济体系的指导意见',
          policy_country: '中国',
          policy_time: '2021.02.22',
          policy_title:
            '国务院关于加快建立健全绿色低碳循环发展经济体系的指导意见'
        },
        {
          policy_content:
            '科技部关于印发《国家高新区绿色发展专项行动实施方案》的通知',
          policy_country: '中国',
          policy_time: '2021.02.12',
          policy_title:
            '科技部关于印发《国家高新区绿色发展专项行动实施方案》的通知'
        },
        {
          policy_content:
            '关于深入打好污染防治攻坚战共同推进生态环保重大工程项目融资的通知',
          policy_country: '中国',
          policy_time: '2021.04.11',
          policy_title:
            '关于深入打好污染防治攻坚战共同推进生态环保重大工程项目融资的通知'
        },
        {
          policy_content: '国务院办公厅关于科学绿化的指导意见',
          policy_country: '中国',
          policy_time: '2021.06.02',
          policy_title: '国务院办公厅关于科学绿化的指导意见'
        },
        {
          policy_content: '关于推动生态环境志愿服务发展的指导意见',
          policy_country: '中国',
          policy_time: '2021.06.04',
          policy_title: '关于推动生态环境志愿服务发展的指导意见'
        },
        {
          policy_content:
            '国务院关于印发全民科学素质行动规划纲要（2021—2035年）的通知',
          policy_country: '中国',
          policy_time: '2021.06.25',
          policy_title:
            '国务院关于印发全民科学素质行动规划纲要（2021—2035年）的通知'
        },
        {
          policy_content: '国务院关于印发2030年前碳达峰行动方案的通知',
          policy_country: '中国',
          policy_time: '2021.10.26',
          policy_title: '国务院关于印发2030年前碳达峰行动方案的通知'
        },
        {
          policy_content:
            '关于深化生态环境领域依法行政 持续强化依法治污的指导意见',
          policy_country: '中国',
          policy_time: '2021.11.17',
          policy_title:
            '关于深化生态环境领域依法行政 持续强化依法治污的指导意见'
        },
        {
          policy_content: '关于开展气候投融资试点工作的通知',
          policy_country: '中国',
          policy_time: '2021.12.25',
          policy_title: '关于开展气候投融资试点工作的通知'
        },

        /**2022 */
        {
          policy_content:
            '国务院关于印发“十四五”现代综合交通运输体系发展规划的通知',
          policy_country: '中国',
          policy_time: '2022.01.18',
          policy_title:
            '国务院关于印发“十四五”现代综合交通运输体系发展规划的通知'
        },
        {
          policy_content: '国务院关于印发计量发展规划（2021—2035年）的通知',
          policy_country: '中国',
          policy_time: '2022.01.28',
          policy_title: '国务院关于印发计量发展规划（2021—2035年）的通知'
        },
        {
          policy_content: '国务院关于印发“十四五”推进农业农村现代化规划的通知',
          policy_country: '中国',
          policy_time: '2022.02.11',
          policy_title: '国务院关于印发“十四五”推进农业农村现代化规划的通知'
        },
        {
          policy_content:
            '国务院关于印发气象高质量发展纲要（2022—2035年）的通知',
          policy_country: '中国',
          policy_time: '2022.05.19',
          policy_title: '国务院关于印发气象高质量发展纲要（2022—2035年）的通知'
        },
        {
          policy_content: '关于印发《国家适应气候变化战略2035》的通知',
          policy_country: '中国',
          policy_time: '2022.06.14',
          policy_title: '关于印发《国家适应气候变化战略2035》的通知'
        },
        {
          policy_content: '关于印发《减污降碳协同增效实施方案》的通知',
          policy_country: '中国',
          policy_time: '2022.06.17',
          policy_title: '关于印发《减污降碳协同增效实施方案》的通知'
        },
        {
          policy_content:
            '国家减灾委员会关于印发《“十四五”国家综合防灾减灾规划》的通知',
          policy_country: '中国',
          policy_time: '2022.07.22',
          policy_title:
            '国家减灾委员会关于印发《“十四五”国家综合防灾减灾规划》的通知'
        },
        {
          policy_content:
            '关于印发《“十四五”生态环境领域科技创新专项规划》的通知',
          policy_country: '中国',
          policy_time: '2022.11.02',
          policy_title: '关于印发《“十四五”生态环境领域科技创新专项规划》的通知'
        },
        {
          policy_content:
            '交通运输部办公厅关于印发《港口承灾体自然灾害风险防控工作指南》的通知',
          policy_country: '中国',
          policy_time: '2023.01.14',
          policy_title:
            '交通运输部办公厅关于印发《港口承灾体自然灾害风险防控工作指南》的通知'
        },
        {
          policy_content:
            '工业和信息化部等六部门关于推动能源电子产业发展的指导意见',
          policy_country: '中国',
          policy_time: '2023.01.17',
          policy_title:
            '工业和信息化部等六部门关于推动能源电子产业发展的指导意见'
        },
        {
          policy_content:
            '关于做好2021、2022年度全国碳排放权交易配额分配相关工作的通知',
          policy_country: '中国',
          policy_time: '2023.03.16',
          policy_title:
            '关于做好2021、2022年度全国碳排放权交易配额分配相关工作的通知'
        }
      ]
      const seriesList = []
      const yarr = []
      const linearr = []
      const linev = { value: -0, symbol: 'none' }

      list.map((item, index) => {
        seriesList.push({
          date: item.policy_time,
          title: item.policy_title,
          country: item.policy_country,
          content: item.policy_content,
          value: 0,
          label: {
            show: true,
            lineHeight: 20,
            align: index % 2 === 0 ? 'left' : 'right',
            padding: 20,
            position: index % 2 === 0 ? 'left' : 'right',
            formatter: function (params) {
              return `{bolder|${params.name}}\n${params.data.title}`
            },
            rich: {
              bolder: {
                fontWeight: 700,
                color: color.time
              }
            }
          }
        })
      })
      seriesList.map((item) => {
        linearr.push({
          value: -0
        })
        yarr.push(`${item.date}  ${item.country}`)
      })
      this.chart.setOption({
        grid: {
          top: 0,
          left: '50%',
          right: '50%',
          bottom: 0
        },
        legend: {
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            padding: [2, 0, 0, 0]
          }
        },
        xAxis: {
          show: false,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false },
          min: 0,
          max: 0
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              width: 4,
              color: 'blue'
            }
          },

          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            margin: 30,
            alignWithLabel: true,
            show: false
          },
          data: ['', ...yarr, '']
        },
        color: ['#333'],
        series: [
          {
            type: 'line',
            symbolSize: 8,
            color: color.text,
            itemStyle: {
              borderColor: 'black',
              borderWidth: 2
            },

            hoverAnimation: false,
            legendHoverLink: false,
            data: [linev, ...seriesList, linev],
            lineStyle: {
              color: color.line
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.time-line {
  padding: 0 20px;
}
</style>
